<template>
  <div class="block">
    <!--
      录取概率
      使用：
      <block type="probability" :data="{id:1,name:'无',probability:'32'}" :item="item"></block>
    -->
    <div v-if="type === 'probability'" class="block-probability" :class="'c-'+ data.id">
      <h6>录取概率</h6>
      <p>{{data.name||'无'}}</p>
      <!-- <span>{{data.id!==4?data.probability+'%':data.probability}}</span> -->
      <span>{{(data.probability||'-')+'%'}}</span>
    </div>

    <!--
      学校信息
      使用：
      <block type="school" :data="{img:'',w:'图片宽',h:'图片高',name:'广西师范大学',city:'桂林市',typeName:'师范',level:item.collegeLevelList}" :item="item"></block>
      注意 ：如果存在w,h说明是用户中心的展示样式
    -->
    <div v-else-if="type === 'school'" class="block-school">
      <img :src="data.img | imgResize(data.w,data.h)" v-if="data.w && data.h" :style="'width:'+data.w+'px; height:'+data.h+'px'">
      <img :src="data.img | imgResize(90,90)" v-else style="width:90px; height:90px">
      <div class="block-school--centent">
        <h2 class="block-title">{{data.name||'● ● ● ● ● ●'}}</h2>
        <ul>
          <li v-for="(item,index) in data.level" :key="index" :class="'block-school--'+item.id">{{item.name}}</li>
          <li v-if="data.typeName" class="block-school--btn">{{data.typeName}}</li>
          <li v-if="data.w">{{data.city||''}}</li>
        </ul>
        <span v-if="!data.w">{{data.city||'-'}}</span>
      </div>
    </div>

    <!--
      专业信息
      使用：
      <block type="major" :data="{img:'',name:'广西师范大学',schoolingTime:'3',grade:'本科',city:'桂林市',tuition:'4500'}" :item="item"></block>
    -->
    <div v-else-if="type === 'major'" class="block-major">
      <div class="block-major--main">
        <h2 class="block-title">
          <img v-if="data.img" :src="data.img | imgResize(33,33)">
          <em>{{data.name}}</em>
        </h2>
        <ul v-if="data.schoolingTime || data.grade">
          <li class="bg-orange" v-if="data.schoolingTime">学制{{data.schoolingTime}}年</li>
          <li class="bg-blue" v-if="data.grade">{{data.grade}}</li>
        </ul>
        <span v-if="data.city">{{data.city}}</span>
        <p v-if="data.tuition">{{data.tuition?data.tuition:'-'}}元/年</p>
      </div>
    </div>

    <!--
      招生计划
      使用：
      <block type="plan" :data="{year:'2018',plan:'12',list:{}}" :item="item"></block>
    -->
    <div v-else-if="type === 'plan'" class="block-plan">
      <div class="block-plan--left">
        <h6>{{data.year||'今年'}}</h6>
        <p>招生计划</p>
        <span>{{data.plan||'-'}}</span>
      </div>
      <div class="block-plan--right" v-if="data.list">
        <dl v-for="(item, index) in data.list" :key="index">
          <dt>{{item.year}}</dt>
          <!-- <dd>
            <el-tooltip content="最高分数" placement="top">
              <span>{{item.maxScore>0?item.maxScore:'-'}}</span>
            </el-tooltip>
          </dd> -->
          <dd>
            <el-tooltip content="最低分数" placement="top">
              <span>{{item.minScore>0?item.minScore:'-'}}</span>
            </el-tooltip>
          </dd>
          <dd>
            <el-tooltip content="最低位次" placement="top">
              <span>{{item.minRank>0?item.minRank:'-'}}</span>
            </el-tooltip>
          </dd>
          <dd>
            <el-tooltip content="线差" placement="top">
              <span>{{item.scoreLineDiff>0?item.scoreLineDiff:'-'}}</span>
            </el-tooltip>
          </dd>
          <dd>
            <el-tooltip content="招生人数" placement="top">
              <span>{{item.enrollCount>0?item.enrollCount:'-'}}</span>
            </el-tooltip>
          </dd>
        </dl>
      </div>
    </div>

    <div v-else>
      请填写type名称
    </div>
  </div>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default () {
        return ''
      }
    },
    data: {
      type: Object,
      default () {
        return {}
      }
    },
    // 全部数据，以便扩展
    item: {
      type: [Object, String, Array],
      default () {
        return ''
      }
    }
  },
  created () {
    // console.log('type',this.type)
  }
}
</script>
<style lang="scss" scoped>
.block{
  height:100%;
  // display:inline-block;
  // 公共标题样式
  &-title{
    color:#000;
    font-weight:bold;
    font-size:24px;
    @extend .ell;
    @include lh(33);
  }
  // 录取概率
  &-probability{
    height:100%;
    width:100px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items: center;
    h6{
      color:$stable-ad;
      font-weight:normal;
      @include lh(20)
    }
    p{
      font-weight:bold;
      font-size:30px;
      @include lh(42)
    }
    span{
      font-size:24px;
      @include lh(33)
    }
  }

  // 学校信息
  &-school{
    height:100%;
    flex:1;
    overflow: hidden;
    padding:18px;
    cursor:pointer;
    display:flex;
    align-items: center;
    &:hover{
      @extend .bg-f7;
    }
    img{
      // width:90px; height:90px;
      margin-right:15px;
      border-radius:50%;
    }
    &--centent{
      flex:1;
      overflow: hidden;
      >h2{
        margin-bottom:5px;
      }
      >ul{
        display: flex;
        li{margin-right:10px;}
      }
      >span{
        display:inline-block;
        padding-top:5px;
      }
    }
    /* 大学性质 */
    &--btn{
      padding:0 5px;
      min-width:34px; text-align:center;
      height:20px; line-height:20px;
      border-radius:2px;
      font-size:14px;
      background:#1DC6B1;
      color:#FFF;
    }
    /* {1001:'双一流',1002:'985',1003:'211'} */
    &--1001, &--1002, &--1003{
      padding:0 5px;
      min-width:34px; text-align:center;
      height:20px; line-height:18px;
      border-radius:2px;
      font-size:14px;
    }
    &--1001{
      color:$table-b;
      border:1px dotted $table-b;
    }
    &--1002{
      color:$table-r;
      border:1px dotted $table-r;
    }
    &--1003{
      color:$table-y;
      border:1px dotted $table-y;
    }
  }

  // 专业信息
  &-major{
    height:100%;
    padding:18px;
    cursor:pointer;
    flex: 1;
    overflow: hidden;
    display:flex;
    align-items: center;
    &:hover{
      @extend .bg-f7;
    }
    &--main{
      width: 100%;
      display:flex;
      flex-direction:column;
      >h2{
        display:flex;
        align-items:center;
        >img{
          width:33px; height:33px;
          margin-right:10px;
        }
        >em{
          flex:1;
          overflow:hidden;
          font-style:normal;
          @extend .ell;
        }
      }
      >ul{
        display:flex;
        padding:10px 0;
        >li{
          margin-right:10px;
          color:#FFF;
          font-size:14px;
          border-radius:2px;
          padding:2px 5px;
        }
      }
      span{
        color:#69707F;
      }
      >p{
        color:$positive;
      }
    }
  }

  // 招生计划
  &-plan{
    padding:10px;
    display:flex;
    &--left{
      display:flex;
      flex-direction: column;
      align-items:center;
      width:100px;
      h6{
        font-size:18px;
        height:25px; line-height:25px;
        color:#69707F;
      }
      p{
        color:$stable-ad;
        height:17px; line-height:17px;
        font-size:12px;
      }
      span{
        height:42px; line-height:42px;
        font-size:30px;
        font-weight:bold;
        color:$table-b;
        margin-top:8px;
      }

    }
    &--right{
      display:flex;
      dl{
        width:55px;
        text-align:center;
        dt{
          font-size:14px;
          height:24px; line-height:24px;
          color:$stable-ad;
        }
        dd{
          font-size:12px;
          color:#69707F;
          height:20px; line-height:20px;
          cursor:pointer;
        }
      }
    }
  }
}
</style>
